<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
        layout:decorator="app/mp/mtg/layout"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <style>
        .mtg-header {
            background: url("/m/img/apply_pic.svg");
            background-size: cover;
            height: 200px;
        }
        .mtg-img{
            padding-top: 38px;
            text-align: center;
        }
        .mtg-title {
            text-align: center;
            font-size: 18px;
            font-weight: normal;
            color: black;
            margin-top: -10px;
            font-weight:bold;
        }
        .mtg-content-padded {
            padding: 15px;
        }
        .loan-request_form{
            margin: -50px 15px 0 15px;
            border-radius: 4px;
            background: white;
            padding:25px 10px 25px 10px;
        }
        .loan-request_form .weui-cell{
            background: #F3F3F3;
            border-radius: 4px;
            margin: 0 5px 15px 5px;
        }
        .loan-request_form textarea {
            background: #F3F3F3;
        }
        .loan-request_form .weui-cells:before,.loan-request_form .weui-cells:after,.weui-form-preview:before,.weui-form-preview:after{
            content: none;
        }
        .weui-form-preview__value{
            color: #ff8600;

        }
    </style>
</head>

<div layout:fragment="body">
    <header class='mtg-header'>
        <div class="mtg-img">
            <!--<img src="/m/img/apply_logo.svg" width="60px;"/>-->
        </div>
    </header>

    <form id="ajaxForm" class="loan-request_form" th:object="${loanRequest}">
        <input type="hidden" th:field="*{estateEvalId}"/>
        <input type="hidden" th:field="*{channelId}"/>
        <input type="hidden" th:field="*{managerId}"/>
        <input type="hidden" th:field="*{channelNo}"/>
        <input type="hidden" th:field=="*{id}"/>
        <input type="hidden" th:field=="*{area}"/>
        <h1 class="mtg-title">房抵快贷申请</h1>

        <div class="weui-form-preview">
            <div class="weui-form-preview__bd">
                <div class="weui-form-preview__item">
                    <label class="weui-form-preview__label">最高可贷</label>
                    <span class="weui-form-preview__value">¥<span th:text=${#numbers.formatDecimal(loanAmount,0,'COMMA',0,'POINT')}></span></span>
                </div>
            </div>
        </div>

        <div class="weui-cells weui-cells_form" style="margin-top: 5px;">
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label" th:text="#{loanRequest.name}"></label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="text" placeholder="请输入" th:field="*{name}" required="required"/>
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label" th:text="#{loanRequest.mobile}"></label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="text" th:field="*{mobile}" id="mobile" placeholder="请输入" required="required"/>
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label" th:text="#{loanRequest.loanAmount}"></label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="text" th:field="*{loanAmount}" id="loanAmount" placeholder="请输入" required="required"/>
                </div>
            </div>

        <th:block th:if="!${#strings.isEmpty(loanRequest.channelId)}">
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label" th:text="#{loanRequest.boughtAt}"></label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" name="boughtAt" type="date" placeholder="请选择" required="required">
                </div>
            </div>
            <div class="weui-cell weui-cell_select weui-cell_select-after">
                <div class="weui-cell__hd"><label class="weui-label" th:text="#{loanRequest.propertyCoOwner}"></label></div>
                <div class="weui-cell__bd">
                    <input class="weui-select" type="text" id="propertyCoOwnerSelect" name="propertyCoOwnerSelect" readonly placeholder="请选择" required="required"/>
                    <input type="hidden" id="propertyCoOwner" name="propertyCoOwner" />
                </div>
            </div>
            <div class="weui-cell weui-cell_select weui-cell_select-after">
                <div class="weui-cell__hd"><label class="weui-label" th:text="#{loanRequest.isOnlyHouse}"></label></div>
                <div class="weui-cell__bd">
                    <input class="weui-select" type="text" id="isOnlyHouseSelect" name="isOnlyHouseSelect" readonly placeholder="请选择" required="required"/>
                    <input type="hidden" id="isOnlyHouse" name="isOnlyHouse" />
                </div>
            </div>
            <div class="weui-cell weui-cell_select weui-cell_select-after">
                <div class="weui-cell__hd"><label class="weui-label" th:text="#{loanRequest.mortgageStatus}"></label></div>
                <div class="weui-cell__bd">
                    <input class="weui-select" type="text" id="mortgageStatusSelect" name="mortgageStatusSelect" readonly placeholder="请选择" required="required"/>
                    <input type="hidden" id="mortgageStatus" name="mortgageStatus" />
                </div>
            </div>
            <div class="weui-cell weui-cell_select weui-cell_select-after">
                <div class="weui-cell__hd"><label class="weui-label" th:text="#{loanRequest.useStatus}"></label></div>
                <div class="weui-cell__bd">
                    <input class="weui-select" type="text" id="useStatusSelect" name="useStatusSelect" readonly placeholder="请选择" required="required"/>
                    <input type="hidden" id="useStatus" name="useStatus" />
                </div>
            </div>
            <div class="weui-cell weui-cell_select weui-cell_select-after">
                <div class="weui-cell__hd"><label class="weui-label" th:text="#{loanRequest.maritalStatus}"></label></div>
                <div class="weui-cell__bd">
                    <input class="weui-select" type="text" id="maritalStatusSelect" name="maritalStatusSelect" readonly placeholder="请选择" required="required"/>
                    <input type="hidden" id="maritalStatus" name="maritalStatus" />
                </div>
            </div>
            <div class="weui-cell weui-cell_select weui-cell_select-after">
                <div class="weui-cell__hd"><label class="weui-label" th:text="#{loanRequest.isOverdue}"></label></div>
                <div class="weui-cell__bd">
                    <input class="weui-select" type="text" id="isOverdueSelect" name="isOverdueSelect" readonly placeholder="请选择" required="required"/>
                    <input type="hidden" id="isOverdue" name="isOverdue" />
                </div>
            </div>
            <div class="weui-cell" id="overdueCount" style="display: none">
                <div class="weui-cell__hd"><label class="weui-label" th:text="#{loanRequest.overdueCount}"></label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="text" th:field="*{overdueCount}" placeholder="请输入逾期次数" required="required"/>
                </div>
            </div>
        </th:block>
        </div>

        <th:block th:if="!${#strings.isEmpty(loanRequest.channelId)}">
        <div class="weui-cells__title" th:text="#{loanRequest.fundUse}"></div>
        <div class="weui-cells weui-cells_form">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <textarea class="weui-textarea" th:field="*{fundUse}" placeholder="请输入资金用途" rows="3"></textarea>
                </div>
            </div>
        </div>
        </th:block>

        <th:block th:if="${#strings.isEmpty(loanRequest.channelId)}">
        <div class="weui-cells__title" th:text="#{loanRequest.remark}"></div>
        <div class="weui-cells weui-cells_form">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <textarea class="weui-textarea" th:field="*{remark}" placeholder="请输入备注" rows="3"></textarea>
                </div>
            </div>
        </div>
        </th:block>

        <div class="mtg-content-padded">
            <a href="javascript:;" class="weui-btn weui-btn_primary" id="submit-btn">提交申请</a>
        </div>
    </form>

</div>

<script type="text/javascript" layout:fragment="script">/*<![CDATA[*/
var $form;
$(function() {
    $form = $("#ajaxForm");
    $form.validate();

    initSelect("propertyCoOwnerSelect", "/app/common/config?code=HAVE_OR_NOT_ENUM", {
        onChange: function(data) {
            $("#propertyCoOwner").val(data.values);
            $("#propertyCoOwnerSelect").val(data.titles);
        }
    });

    initSelect("isOnlyHouseSelect", "/app/common/config?code=IF_OR_NOT_ENUM", {
        onChange: function(data) {
            $("#isOnlyHouse").val(data.values);
            $("#isOnlyHouseSelect").val(data.titles);
        }
    });

    initSelect("mortgageStatusSelect", "/app/common/config?code=HAVE_OR_NOT_ENUM", {
        onChange: function(data) {
            $("#mortgageStatus").val(data.values);
            $("#mortgageStatusSelect").val(data.titles);
        }
    });

    initSelect("useStatusSelect", "/app/common/config?code=HOUSE_USE_STATUS_ENUM", {
        onChange: function(data) {
            $("#useStatus").val(data.values);
            $("#useStatusSelect").val(data.titles);
        }
    });

    initSelect("maritalStatusSelect", "/app/common/config?code=MARITAL_STATUS_ENUM", {
        onChange: function(data) {
            $("#maritalStatus").val(data.values);
            $("#maritalStatusSelect").val(data.titles);
        }
    });

    initSelect("isOverdueSelect", "/app/common/config?code=HAVE_OR_NOT_ENUM", {
        onChange: function(data) {
            $("#isOverdue").val(data.values);
            $("#isOverdueSelect").val(data.titles);
            if(data.values == 1){
                $("#overdueCount").show();
            }else{
                $("#overdueCount").hide();
            }
        }
    });

    $("#submit-btn").click(function () {
        toRequest();
        return false;
    });


//    initSelect("areaSelect", "/app/common/area/list?parentCode=330100&codeType=area", {
//        onChange: function(data) {
//            $("#area").val(data.values);
//            $("#areaSelect").val(data.titles);
//        }
//    });

});

function toRequest() {
    if (!$form.valid()) {
        return false;
    }
    var loanAmount = $("#loanAmount").val();
    var reg=/^[0-9]+(\.[0-9]+)?$/;
    if(!reg.test(loanAmount)){
        $.toast("输入非法字符", "text");
        return true;
    }
    var msg = "确认要提交申请";
    $.confirm(msg, function () {
        //加载遮挡层
        $.showLoading("提交中");

        //点击确认后的回调函数
        var formData = $form.serialize();
        var url = "/app/mp/mtg/toRequest";

        $.ajax({
            type: "POST",
            url: url,
            cache: false,
            data: formData,
            success: function (reply) {
                //关闭遮挡层
                $.hideLoading();
                if (reply.success) {
                    $.toast(reply.message, "text");
                    window.location.href = "/app/mp/mtg/success";
                } else {
                    $.toast(reply.message, "text");
                }
            }
        });
    }, function () {
        //点击取消后的回调函数
    });
}
/*]]>*/</script>

</html>